﻿<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="/style/rightdirectory.css" rel="stylesheet" />
    <link href="/script/drp/drp.css" rel="stylesheet" />
    <link href="/script/valid/css/tr.css" rel="stylesheet" /><!--判断如：PlatformName格式-->
    <script src="/script/config.js"></script>
    <!--<script src="/script/date/moment.js"></script>-->

</head>

<body>
    <h5>购买会员样版配置</h5>
    <div class="form-body">
        <div class="form-horizontal  hide" id="form">

        </div>
    </div>
</body>
</html>
<script type="text/html" id="tp-form">
    <div class="form-group">
        <label class="col-sm-2">产品名称</label>
        <div class="col-md-6 col-sm-10">
            <input type="text" class="form-control" data-form="ProductName" placeholder="产品名称" value="{{ProductName}}">
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2">描述</label>
        <div class="col-md-6 col-sm-10">
            <input type="text" class="form-control" data-form="Describe" placeholder="描述" value="{{Describe}}">
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2">价格</label>
        <div class="col-md-6 col-sm-10">
            <input type="text" class="form-control" data-form="Price" placeholder="价格" value="{{Price}}">
        </div>
    </div>


    <div class="form-group">
        <label class="col-sm-2">会员等级</label>
        <div class="col-md-6 col-sm-10">
            <select class="form-control enrich-drop-down" data-form="CustomerGradeConfig_Id" value="{{CustomerGradeConfig_Id}}">
                <option value="">请选择类型</option>
                {{each initVipList item}}
                <option value="{{item.Id}}" {{if item.Id==CustomerGradeConfig_Id}} selected {{/if}}>{{item.VipName}} </option>
                {{/each}}
            </select>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2">卡过期时间</label>
        <div class="col-md-6 col-sm-10">
            <div class="input-group">
                <input id="createTime" type="text" class="form-control" data-form="ExpiresDate" readonly value="{{ExpiresDate}}"   placeholder="创建时间">
            </div>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2">状态</label>
        <div class="col-sm-2 col-sm-1">
            <label class="radio-reset">
                <input type="radio" name="m" data-form="UseStatus" value="1" {{UseStatus|radio_checked 1}}>
                <span>使用 </span>
            </label>
            <label class="radio-reset">
                <input type="radio" name="m" data-form="UseStatus" value="2" {{UseStatus|radio_checked 2}}>
                <span>禁止</span>
            </label>
        </div>
    </div>

    <div class="form-group" id="btn-img">
        <label class="col-sm-2">产品图片</label>
        <div class="col-md-1 col-sm-1">
            {{if pageid>0}}
            <img id="img-src" class="col-md-1 col-sm-3" data-form="Pic" src="{{Pic}}" style="width:60px;height:40px;margin-bottom:10px;" />
            {{else}}
            <img id="img-src" class="col-md-1 col-sm-3" src="/img/logo.png" style="width:60px;height:40px;margin-bottom:10px;" />
            {{/if}}
            <input type="hidden" id="Icon" data-form="Pic" value="{{Pic}}" />
            <button class="btn btn-success y-btn" type="button" id="imgUpload" onclick="btnimg()">添加</button>
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="button" id="btn-submit" class="btn btn-primary">保存</button>
            <button type="button" class="btn" onclick="window.history.go(-1)">退出</button>
        </div>
    </div>
</script>
<script src="/script/valid/form-valid.js?v=2018"></script>
<script src="/script/plugins/upload/js/config.js"></script>

<script src="/script/drp/drp.js"></script><!--双时间组件 如果不用就不需要引用-->
<script>
    function btnimg() {
        //图标上传
        $.WebUploader({
            uploader: { //图片上传配置
                fileNumLimit: 1, // 验证文件总数量, 超出则不允许加入队列
                fileSingleSizeLimit: 1000000, //验证单个文件大小是否超出限制,单位计算/b
                accept: { //现在被上传文件 不可分体的列表
                    title: 'Images',
                    extensions: 'gif,jpg,jpeg,bmp,png,ico',
                    mimeTypes: 'image/*'
                },
                succee: function (rs) {
                    console.log(rs)
                    $("#Icon").val(rs.Url);
                    $("#img-src").attr("src", rs.Url);
                    $.msgSucceed("上传成功！")
                }
            }
        });
    }

    $(function () {
        $.http.request("cvip/list", {},
            {
                pass: function (d) {                
                    initEvent(d);
                }
            }
        );
    })

    function initEvent(vip) {
        var id = QueryPageUrlString("v");//判断是否是编辑进来的
        var formValidEvent;
        var formValidInit = function () {
            var formValidData = [
                {
                    key: "Describe",
                    datatype: "*",
                    nullmsg: "不能为空哦",
                    errormsg: "不能为空哦"
                },
                {
                    key: "ProductName",
                    datatype: "*",
                    nullmsg: "不能为空哦",
                    errormsg: "不能为空哦"
                },
                {
                    key: "Price",
                    datatype: "n",
                    nullmsg: "不能为空哦",
                    errormsg: "请正确输入！"
                },
                {
                    key: "ExpiresDate",
                    datatype: "*",
                    nullmsg: "不能为空哦",
                    errormsg: "请正确输入！"
                },

            ];
            formValidEvent = $(".form-body").formValid(formValidData);
        }
        var inintData = {
            Describe: "",
            ProductName: "",
            Price: "",
            SortId: "",
            ExpiresDate: "",
            initVipList: vip,
            pageid: id
        };

        if (id > 0) { //存在值的情况
            $.http.json("buycustomercard/find", {   //查询
                Id: id
            }, {
                    pass: function (data) {
                       
                        data.pageid = id;
                        data.initVipList = vip;
                        initTemplateRender(data);
                    },
                    error: function (d) {
                        console.log(d);
                    }
                })
        } else {
            initTemplateRender(inintData);
        }

        $("#form").on("click", "#btn-submit", function () { //保存按钮有添加和编辑
            if (!formValidEvent.check()) { return; }
            var apiUrl = "buycustomercard/insert";
            if (id > 0) {
                apiUrl = "buycustomercard/upd";
            }
            $("#form").ajaxFormSubmit(apiUrl, {
                pass: function (d) {
                 
                    $.msgSucceed(d.Errmsg);
                    return
                },
                error: function (d) {
                    console.log(d)
                    $.msgFall(d.Errmsg);
                }
            }, { addData: { Id: id, } })
            return
        });


        function initTemplateRender(data) {
            $("#form").templateRender({ el: "tp-form", data: data });//渲染模板，要先渲染才能获值
            formValidInit();
            onDateTime($("#createTime"));
        }
        function onDateTime(o) {
            var parm = {
                startDate: moment().startOf('day'),
               // opens: "left",
                linkedCalendars: false,
                autoUpdateInput: false,
            };
            $(o).daterangepicker(parm);
            //绑定事件
            $(o).on("apply.daterangepicker", function (ev, picker) {
                $(this).val(picker.startDate.format('YYYY/MM/DD HH:mm:ss') +
                    ' - ' + picker.endDate.format('YYYY/MM/DD HH:mm:ss'));
            });
            $(o).on("cancel.daterangepicker", function () {
                $(this).val("");
            });
        }
    }

   
</script>
